<template>
  <div class="letter-base">
    <div class="avatar" @click="toUser">
      <img
        :src="flag ? person.userDeatil.avatarUrl : user.avatarUrl"
        alt="404"
      />
    </div>
    <div class="title" @click="toTalk">
      <div class="top">
        <span class="nickname">{{
          flag ? person.userDeatil.nickname : user.nickname
        }}</span>
        <span class="time">{{ $filters.formatTime(person.lastMsgTime) }}</span>
      </div>
      <div class="comtent text-full-hidden">
        {{ JSON.parse(person.lastMsg).msg }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, defineProps } from 'vue'
import { useRouter } from 'vue-router'
import emitter from '@/utils/events'
const router = useRouter()
const props = defineProps({
  person: {
    type: Object,
    default: () => {
      return {
        lastMsg: '网易云官方认证',
        lastMsgTime: 1649855105933,
        userDeatil: {
          avatarUrl:
            'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          nickname: '网易云音乐'
        }
      }
    }
  }
})
const flag = ref(true)
const user = ref<any>({})
if (!props.person.userDeatil) {
  user.value = {
    avatarUrl:
      'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    nickname: '网易云音乐'
  }
  flag.value = false
}
const toUser = () => {
  router.push('/main/user' + props.person.user.fromUserId)
  emitter.emit('handelClose', false)
}
const toTalk = () => {
  emitter.emit('switchCpn', { flag: true, id: props.person.user.fromUserId })
}
</script>

<style scoped lang="less">
.letter-base {
  width: 100%;
  padding: 6px 8px;
  display: flex;
  border-bottom: 1px solid #e5e5e5;
  cursor: pointer;
  margin-top: 6px;
  &:hover {
    background: #f6f6f7;
  }
  .avatar {
    margin-right: 8px;
    width: 35px;
    img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
  }
  .title {
    flex: 1;
    padding-right: 8px;
    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 3px;
      .nickname {
        color: #507daf;
        font-size: 14px;
      }
      .time {
        font-size: 12px;
        color: #e5e5e5;
      }
    }
    .comtent {
      width: 260px;
      margin-top: 4px;
      font-size: 12px;
      color: #333;
    }
  }
}
</style>
